<template>
	<view class="page" :style="{'height':pgHeight+'px'}">
		<ttBar leftIcon="" rightIcon=""></ttBar>
		<view class="loginBox">
			<view class="loginTab">
				<text :class="[isTelLogin?'':'active']" @tap="toggleLoginType">账号登录</text>
				<view></view>
				<text :class="[isTelLogin?'active':'']" @tap="toggleLoginType">验证码登录</text>
			</view>
			<view class="tabContent" v-if="isTelLogin">
				<view class="row">
					<text class="rowLable">手机号</text>
					<input type="number" value="" placeholder="请输入手机号码" v-model="tel" maxlength="11" />
				</view>
				<view class="row">
					<text class="rowLable">验证码</text>
					<input type="number" placeholder="请输入短信验证码" v-model="msgCode" maxlength="6" />
					<text :class="['sendBtn',isSendMsg?'isSend':'']" v-text="sendText" @tap="getMsgCode"></text>
				</view>
				<text class="findPass"></text>
				<view class="btnBox">
					<button @tap="login">登录</button>
				</view>
				<view class="zcBox">
					<text>登录代表您同意</text>
					<text class="cl" @tap="toPage" data-url='https://test.hawklu.com/text.html'>《隐私政策》</text>
				</view>
			</view>
			<view class="tabContent" v-if="!isTelLogin">
				<view class="row">
					<text class="rowLable">账号</text>
					<input type="text" value="" placeholder="账号或手机号" v-model="userName" maxlength="20" />
				</view>
				<view class="row">
					<text class="rowLable">密码</text>
					<input type="text" :password="showPass" placeholder="请输入密码" v-model="userPass" maxlength="16" />
					<text :class="['iconfont',showPass?'icon-eyeClose':'icon-eyeOpen']" @tap="toggleShowPass"></text>
				</view>
				<text class="findPass" @tap="toPage" data-url="findPass">找回密码</text>
				<view class="btnBox">
					<button @tap="login">登录</button>
				</view>
				<view class="zcBox">
					<text>登录代表您同意</text>
					<text class="cl" @tap="toPage" :data-url="initInfo.privacy">《隐私政策》</text>
				</view>
			</view>
		</view>
		<view class="regBox">
			<text>还没有注册？</text>
			<text class="cl" @tap="toPage" data-url="register">立即注册</text>
		</view>
		<updateModal ref="upModal"></updateModal>
		<downLoding></downLoding>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	import COMM from "@/common/common.js";
	import downLoding from "@/components/downLoding/downLoding.vue";
	import updateModal from "@/components/updateModal/updateModal.vue";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar,
			downLoding,
			updateModal
		},
		computed:{
			...mapState({
				initInfo:state=>state.sys.initInfo,
				pushId:state=>state.push.pushId,
				imei:state=>state.push.imei,
				userInfo:state=>state.user.userInfo
			})
		},
		data() {
			return {
				pgHeight:uni.getSystemInfoSync().screenHeight,
				isTelLogin: false,
				tel: '',
				msgCode: '',
				userName: '',
				userPass: '',
				isGetMsg: false,
				sendText: '获取验证码',
				isSendMsg: false,
				showPass: true
			};
		},
		watch:{
			userInfo(newVal){
				// #ifdef APP-PLUS
				setTimeout(()=>{
					if(this.pushId){
						this.$store.dispatch("editUserInfo",{
							userId:newVal.userId,
							pushId:this.pushId,
							imei:this.imei
						})
					}
				},3000)
				// #endif
			}
		},
		methods: {
			// 切换登录类型
			toggleLoginType() {
				this.isTelLogin = !this.isTelLogin
			},
			// 手机号+验证码登录
			loginByTel() {
				let rgx = /^1[3456789]\d{9}$/;
				if (!this.tel) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
				} else if (!rgx.test(this.tel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
				} else if (!this.isGetMsg) {
					uni.showToast({
						title: '请先获取短信验证码',
						icon: 'none'
					});
				} else if (!this.msgCode) {
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none'
					});
				} else {
					uni.hideKeyboard()
					this.$store.dispatch("loginByMsgCode",{
						username:this.tel,
						code:this.msgCode
					})
				}
			},
			// 用户名+密码登录
			loginByName() {
				if (!this.userName) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
				} else if (!this.userPass) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
				} else {
					uni.hideKeyboard()
					this.$store.dispatch("loginByName",{
						username:this.userName,
						password:this.userPass
					})
				}
			},
			login() {
				if (this.isTelLogin) {
					this.loginByTel()
				} else {
					this.loginByName()
				}
			},
			// 获取短信验证码
			getMsgCode() {
				if (!this.isSendMsg) {
					let rgx = /^1[3456789]\d{9}$/;
					if (!this.tel) {
						uni.showToast({
							title: '请输入手机号码',
							icon: 'none'
						});
					} else if (!rgx.test(this.tel)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						});
					} else {
						this.$store.dispatch("sendMsgCode",{
							phone:this.tel,
							type:'102'
						}).then((res)=>{
							if(res.data.code==1){
								this.isGetMsg = true; //修改状态
								let t = 60;
								this.sendText = t + "秒"
								this.isSendMsg = true;
								const itval = setInterval(() => {
									t--;
									if (t < 1) {
										t = 60;
										this.sendText = "获取验证码"
										this.isSendMsg = false;
										clearInterval(itval);
									} else {
										this.isSendMsg = true;
										this.sendText = t + "秒"
									}
								}, 1000)
							}
							
							
						})
						

					}
				} else {
					uni.showToast({
						title: '发送的间隔太短啦，请稍后再试',
						icon: 'none'
					});
				}

			},
			// 切换显示密码
			toggleShowPass() {
				this.showPass = !this.showPass
			}
			
		},
		onLoad() {
			
		},
		onUnload() {
			
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
	}

	.page {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.loginBox {
		padding: 0 42upx;
	}

	.loginTab {
		margin-top: 94upx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		>text {
			font-size: 52rpx;
			font-weight: bold;
			color: #a0a0aa;
		}

		>view {
			width: 3rpx;
			height: 28rpx;
			background-color: #a0a0aa;
		}

		.active {
			color: #202932;
		}
	}

	.tabContent {
		margin-top: 93upx;
		display: flex;
		flex-direction: column;

		.row {
			display: flex;
			align-items: center;
			padding-bottom: 32upx;
			padding-top: 58upx;
			border-bottom: 1px solid #e7e7e7;

			.rowLable {
				font-size: 36upx;
				font-weight: bold;
				color: #565866;
				margin-right: 40upx;
			}

			input {
				font-size: 36upx;
				flex-shrink: 1;
				flex-grow: 1;
				width: 360upx;
			}

			.sendBtn {
				font-size: 28rpx;
				color: #ff7d27;
				flex-shrink: 0;
				flex-grow: 1;
				text-align: right;
			}

			.isSend {
				color: #565866;
			}

			.iconfont {
				font-size: 48upx;
			}
		}

		.findPass {
			margin-top: 28upx;
			font-size: 26upx;
			font-weight: bold;
			color: #a0a0aa;
			text-align: right;
			display: inline-block;
			height: 34upx;
		}

		.btnBox {
			margin-top: 76upx;
			padding: 0 40upx;

			button {
				width: 100%;
				height: 88upx;
				border-radius: 44upx;
				background-color: #ffb423;
				color: #FFFFFF;
				font-size: 34upx;
			}

			button:after {
				border: none;
			}
		}

		.zcBox {
			margin-top: 34upx;
			font-size: 26rpx;
			color: #777777;
			display: flex;
			align-items: center;
			justify-content: center;

			.cl {
				color: #f8a008;
			}
		}
	}

	.regBox {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 100upx;
		display: flex;
		justify-content: center;
		font-size: 26rpx;
		color: #777777;
		display: flex;

		.cl {
			color: #f8a008;
		}
	}
</style>
